<script setup>
import { useTemplateRef } from 'vue'

/** 暴露函数 */

defineExpose({
  removeAnimate,
  addAnimate,
})

/** 动画 */

const ani001 = useTemplateRef('ani-001')
const ani002 = useTemplateRef('ani-002')

function removeAnimate() {
  // 移除所有动画类
  ani001.value.classList.remove('animate__backInLeft')
  ani002.value.classList.remove('animate__slideInDown')
}

function addAnimate() {
  // 添加动画类
  // 下一帧重新添加动画类
  requestAnimationFrame(() => {
    ani001.value.classList.add('animate__backInLeft')
    ani002.value.classList.add('animate__slideInDown')
  })
}
</script>
<template>
  <div class="box">
    <p class="title animate__animated" ref="ani-001">『社团介绍』</p>
    <p class="text animate__animated" ref="ani-002">
      笔墨传情，书韵流香！书法社是一个以传承中华传统文化、提升书写艺术为核心的社团。我们定期举办书法练习、名家讲座、作品展览等活动，无论你是书法爱好者还是零基础小白，都能在这里找到书写的乐趣与成长的空间。
    </p>
  </div>
</template>
<style scoped>
.box {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-family: 'wangxizhi';
}

.title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.text {
  font-size: 0.5rem;
  line-height: 1.5;
  padding: 1rem;
  text-indent: 2em;
  background: #f5f5dc;
}
</style>
